<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/commons.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/edit.css}"/>
    <link rel="stylesheet" th:href="@{/lib/editorMarkdown/css/editormd.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/semantic.min.css}"/>

</head>

<body>

<div th:replace="admin/commons/bar::#header(activeUrl='index')"/>

<div class="container" id="app">

    <div th:replace="admin/commons/bar::#header_menu(menuActive='indexPublish.html',menuActive2='indexList.html',menuActive3='publish')"/>

    <div class=" main_form">
        <form class="form-horizontal navbar ui form">

            <div class=" form-group-sm">
                <div class="form-group row">
                    <div class="col-sm-6">
                        <input class="form-control navbar-left" v-model="blogs.title" type="text"  placeholder="标题">
                    </div>
                    <div class="col-sm-6">
                        <button type="button" class="btn btn-default " @click="cancelTo">取消</button>
                        <button type="button" class="btn btn-success" @click="save">发布</button>
                    </div>

                </div>
            </div>

            <div class="form-group">
                <div id="md-markdown" style="z-index: 1 !important;">
                    <textarea style="display: none;" id="content" ></textarea>
                </div>
            </div>

        </form>
    </div>


    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-ful" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >确定取消？</h4>
                </div>
                <div class="modal-footer" style="border-top: none!important;">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>点错了</button>
                    <button type="button" @click="back" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>确定取消发布</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="publishModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-ful" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >发布</h4>
                </div>

                <div class="modal-body">

                    <div class="ui form">
                        <div class="field">
                            <label>首页图片地址</label>
                            <input type="text" v-model="blogs.path"  placeholder="图片地址">
                        </div>
                    </div>

                    <div class="field">

                        <div class=" col-sm-6">
                            <label>分类</label>
                            <div id="classifyDiv" class="ui fluid multiple search selection dropdown">
                                <input type="hidden" name="classify" v-model="classifyValue">
                                <i class="dropdown icon"></i>
                                <a class="ui label transition visible" v-for="(classify,index) in blogs.blogsClassifieList" :data-value="classify.id" style="display: inline-block !important;">
                                    {{classify.name}}
                                    <i class="delete icon"></i>
                                </a>
                                <div class="default text">分类</div>
                                <div class="menu">
                                    <div class="item" v-for="(classify,index) in classifyList" :data-value="classify.id" :data-text="classify.name">
                                        {{classify.name}}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class=" col-sm-6" >
                            <label>标签</label>
                            <div id="tagDiv" class="ui fluid multiple search selection dropdown">
                                <input type="hidden" name="tag" v-model="tagValue">
                                <i class="dropdown icon"></i>
                                <a class="ui label transition visible" v-for="(tag,index) in blogs.blogsTagList" :data-value="tag.id" style="display: inline-block !important;">
                                    {{tag.name}}
                                    <i class="delete icon"></i>
                                </a>
                                <div class="default text">标签</div>
                                <div class="menu">
                                    <div class="item" v-for="(tag,index) in tagList" :data-value="tag.id" :data-text="tag.name" >
                                        {{tag.name}}
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>




                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-12">类型</label>
                        </div>
                        <div class="ui checkbox" @click="check('recommend')">
<!--                            @click="check('recommend')"-->
                            <input type="checkbox" v-model="blogs.recommend">
                            <label>推荐</label>
                        </div>
                        <div class="ui checkbox" @click="check('copyright')">
<!--                            @click="check('copyright')"-->
                            <input type="checkbox" v-model="blogs.copyright" class="checkbox">
                            <label>版权申明</label>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    <button type="button" @click="submitEdit" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>保存</button>
                    <button type="button" @click="submitSave" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>立即发布</button>
                </div>
            </div>
        </div>
    </div>


</div>


<div th:replace="admin/commons/bar::#footer"/>

<script th:src="@{/static/js/jq.js}"/>
<script th:src="@{/lib/vue/vue.min.js}"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<script th:src="@{/lib/editorMarkdown/editormd.min.js}"></script>
<script th:src="@{/js/semantic.min.js}"></script>



<script>

    $(function () {
        var contentEditor = editormd("md-markdown",{
            width: "auto",
            height: "600px",
            syncScrolling: "single",
            path: "../lib/editorMarkdown/lib/"
        })
        // $('.ui.checkbox').checkbox();   //使得单选框可以被选中
        $(".ui.dropdown").dropdown();

    })

    var vue = new Vue({
        el:"#app",
        data(){
            return{
                blogs:{
                    id:0,
                    title:null,
                    content:"",
                    path:"http://n.sinaimg.cn/photo/transform/700/w1000h500/20200511/fe11-itmiwry9590007.jpg",
                    recommend:0,
                    copyright:0,
                    status:0,
                    blogsTagList:null,
                    blogsClassifieList:null
                },
                tagList:null,
                classifyList:null,
                tagValue:null,
                classifyValue:null
            }
        },
        methods:{
            ajax:function(method,url,data,back){
                $.ajax({
                    type:method,
                    url:url,
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    data:data,
                    success:function(res){
                        back(res);
                    },
                    error:function(res){
                        console.log(res);
                        if(method!="get")
                            alert("数据加载出现错误！")
                    }
                })
            },
            getParameter:function(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if( r != null ) return decodeURI( r[2] ); return null;
            },
            show:function(name,value){
                var val = "";
                console.log(this.blogs);
                for(var i = 0;i<this.blogs[name].length;i++){
                    if(i!=0)
                        val += ",";
                    val += this.blogs[name][i].id;
                }
                this[value] = val;
            },
            cancelTo:function(){
                $("#delModal").modal();
            },
            save:function(){
                console.log("富文本内容：",this.blogs.content);
                $("#publishModal").modal();
            },
            back:function(){
                window.location.href="indexList.html"
            },
            check:function(name){
                this.blogs[name]=this.blogs[name]==0?1:0;
            },
            each:function(id,name){
                var list = [];
                $(id).find("a").each(function(){
                    list.push({id:$(this).attr("data-value"),name:$(this).html().substring(0,$(this).html().indexOf('\<'))})
                })
                this.blogs[name] = list;
            },
            submitTo:function(method){
                this.each("#tagDiv","blogsTagList");
                this.each("#classifyDiv","blogsClassifieList");

                this.blogs.content = $("#content").html();
                this.ajax(method,"/blogs/blogs",JSON.stringify(this.blogs),function(res){
                    window.location.href="indexList.html"
                })
            },
            submitSave:function(){
                this.blogs.status=1;
                this.submitTo("post");
            },
            submitEdit:function(){
                this.blogs.status=0;
                this.submitTo("PUT");
            }
        },
        created(){
            var that = this;
            this.ajax("get","/blogs/classify",{page:0,size:0},function(res){
                that.classifyList = res.list;
            })
            this.ajax("get","/blogs/tag",{page:0,size:0},function(res){
                that.tagList = res.list;
            })
            var id = this.getParameter("active");
            if(id!=null){
                var that = this;
                this.ajax("get","/blogs/blogs/"+id,null,function(res){
                    $("#content").html(res.content);
                    that.blogs = res;
                    that.show("blogsTagList","tagValue");
                    that.show("blogsClassifieList","classifyValue");
                })
            }
        }
    })



</script>

</body>
</html>